export const useSizeStyle = (attr: any, scale?: number) => {
    if (!attr) return {}
    return {
        width: `${scale ? scale * attr.w : attr.w}px`,
        height: `${scale ? scale * attr.h : attr.h}px`
    }
}

export const useComponentStyle = (attr: any, index: number) => {
    if (!attr) return {}
    const comp = {
        zIndex: index + 1,
        left: `${attr.x}px`,
        top: `${attr.y}px`
    }
    return comp
}

export const usePointStyle = (
    point: string,
    index: number,
    attr: any,
    cursorResize: string[]
) => {
    const {w,h} = attr
    
    const isTop = /t/.test(point)
    const isBottom = /b/.test(point)
    const isLeft = /l/.test(point)
    const isRight = /r/.test(point)
    let newLeft = 0
    let newTop = 0 
    if(point.length === 2){
        // 四个顶点
        newLeft = isLeft ? 0 :w
        newTop = isTop? 0 :h
    }else{
        // 四个边的中间位置
        if(isTop || isBottom){
            newLeft = w / 2
            newTop = isTop ? 0 :h
        }
        if(isLeft || isRight){
            newLeft = isLeft ? 0 : w
            newTop = h / 2
        }
    }
    const style = {
        left: `${newLeft}px`,
        top: `${newTop}px`,
        cursor: cursorResize[index] + '-resize'
    }
    return style
}